<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Backbone.js Todos</title>
  <link rel="stylesheet" href="todos.css"/>
</head>

<body>

  <div id="todoapp">

    <header>
      <h1>Todos</h1>
      <input id="new-todo" type="text" placeholder="What needs to be done?">
    </header>

    <section id="main">
      <input id="toggle-all" type="checkbox">
      <label for="toggle-all">Mark all as complete</label>
      <ul id="todo-list"></ul>
    </section>

    <footer>
      <a id="clear-completed">Clear completed</a>
      <div id="todo-count"></div>
    </footer>

  </div>

  <div id="instructions">
    Double-click to edit a todo.
  </div>

  <div id="credits">
    Created by
    <br />
    <a href="http://jgn.me/">J&eacute;r&ocirc;me Gravel-Niquet</a>.
    <br />Rewritten by: <a href="http://addyosmani.github.com/todomvc">TodoMVC</a>.
  </div>

  <!-- Templates -->

  <script type="text/template" id="item-template">
      <div class="view">
          <input class="toggle" type="checkbox" <%= completed ? 'checked="checked"' : '' %> />
          <label><%- name %></label>
          <a class="destroy"></a>
      </div>
      <input class="edit" type="text" value="<%- name %>" />
  </script>

  <script type="text/template" id="stats-template">
      <% if (completed) { %>
      <a id="clear-completed">Clear <%= completed %> completed <%= completed == 1 ? 'item' : 'items' %></a>
      <% } %>
      <div class="todo-count"><b><%= remaining %></b> <%= remaining == 1 ? 'item' : 'items' %> left</div>
  </script>

  <!-- include libs -->
  <script src="lib/json2.min.js"></script>
  <script src="lib/jquery-1.8.3.min.js"></script>
  <script src="lib/underscore-min.js"></script>
  <script src="lib/backbone-min.js"></script>
  <script src="lib/backbone.localStorage-min.js"></script>

  <!-- include main file -->
  <script src="Todo/Todo.js"></script>

  <!-- include models -->
  <script src="Todo/Model/Item.js"></script>

  <!-- include collections -->
  <script src="Todo/Collection/Item.js"></script>

  <!-- include views -->
  <script src="Todo/View/Item.js"></script>
  <script src="Todo/View/App.js"></script>

  <!-- start application -->
  <script>
      $(function () {
          Todo.init();
      });
  </script>
  </body>
</html>
